<template>
	<div class="background">
		<loading v-if="loading"></loading>
		<div v-if="!loading">
			<div class="top">
				<div class="left" onclick="history.go(-1)">
					<div class="back"></div>
				</div>
				<div class="title">长评--{{MovieCp.subject.title}}</div>
				<div class="right"></div>
			</div>
			<div class="all_cp">
				<div class="changping" v-for="reviews in MovieCp.reviews">
					<h3>标题：{{reviews.title}}</h3>
					<div class="cp_header">
						<star class="star" :num="reviews.rating.value*10"></star>
						<span>{{reviews.created_at}}</span>
					</div>
					<p>
						{{reviews.content}}
					</p>
					<div class="cp_footer">
						<img :src="reviews.author.avatar">
						<span>{{reviews.author.name}}</span>
						<div class="pingjia">
							<span>{{reviews.useful_count}}赞同</span>
							<span>{{reviews.useless_count}}反对</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import star from './star'
	import loading from './loading'
	export default {
		data() {
			return {
				MovieCp: {
					title: ''
				},
				loading: true
			}
		},
		components: {
	    star: star,
	    loading: loading
	  },
		mounted() {
			var id = this.$route.params.id
			this.$http.jsonp("https://api.douban.com/v2/movie/subject/" + id + '/reviews?apikey=0b2bdeda43b5688921839c8ecb20399b').then(function(response) {
		        this.MovieCp = response.body
		        this.loading = false
		  })
		}	
	}
</script>

<style scoped>
	.background {
		background-color: #e5e9f2;
		position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: scroll;
    font-family: FontAwesome,Helvetica,Arial,sans-serif;
	}
	.top{
		display: flex;
    height: 50px;
    width: 100%;
    background-color: #e54847;
    padding: 6px;
    box-sizing: border-box;
    color: #fff;
    font-size: 20px;
	}
	.top .left,.top .right{
		width: 50px;
		text-align: center;
		position: relative;
	}
	.top .back{
    position: absolute;
    top: 12px;
    left: 12px;
		height: 13px;
    width: 13px;
    border: 2px solid #fff;
    border-width: 0 0 2px 2px;
    transform: rotate(45deg);
	}
	.top .title{
		flex: 1;
		text-align: center;
		vertical-align: middle;
		line-height: 40px;
		overflow: hidden;
	}
	.all_cp {
		padding: 10px;
	}
	.changping {
		padding: 10px 0;
		font-size: 12px;
		color: #999;
		overflow: hidden;
	}
	.changping h3{
		font-size: 16px;
		color: #333;
		line-height: 19px;
		margin-bottom: 10px;
	}
	.changping p{
		color: #333;
		line-height: 19px;
		overflow: scroll;
		height: 150px;
	}
	.cp_header {
		margin-bottom: 10px;
	}
	.all_cp .star{
		display: inline-block;
	}
	.cp_footer img {
		border-radius: 24px;
	}
	.cp_footer{
		overflow: hidden;
		padding: 10px 0 0 0;
	}
	.cp_footer * {
		vertical-align: middle;
	}
	.cp_footer .pingjia{
		float: right;
		line-height: 48px;
	}
</style>